<template>
	<!-- <h2>拼图列表</h2> -->
	<el-tabs class="el-tabs" type="border-card">
		<el-tab-pane label="正在进行的">
			<div class="awards">
				<ul v-for="(item,index) in array" :key="index">
					<li>
						<div @click="toJigsawPuzzleDetails(item.id)" class="jigsaw-puzzle-container oneGrid1"
							:style="{ boxShadow: `var(--el-box-shadow-light)` }">
							<el-image class="image" :src="item.imageUrl"></el-image>
							<h4>
								{{item.title}}
							</h4>
							<span>{{item.content}}</span>
						</div>
					</li>
				</ul>
			</div>
		</el-tab-pane>
		<el-tab-pane label="已完成"><h3>暂时没有已完成的~</h3></el-tab-pane>
	</el-tabs>


</template>
<script>
	import storage from '/src/utils/localstorage.js'
	export default {
		name: "JigsawPuzzleList",
		data() {
			return {
				
				array: [],
			}
		},
		mounted() { //挂载之后执行的方法
			this.getAllJigsawPuzzle();
		},
		methods: {
			//查询所有拼图
			getAllJigsawPuzzle() {
				this.$axios.get('/api/jigsaw/puzzle/getAllJigsawPuzzle')
					.then(data => {
						this.array = data.list;
						// //foreach遍历数组
						// this.array.forEach(function(item, index) {
						// 	// console.log("item="+item);
						// 	console.log("item[" + index + "].title=" + item.title)
						// 	//item 就是当日按循环到的对象
						// 	//index是循环的索引，从0开始
						// })
					})
			},
			//转到拼图详情页
			toJigsawPuzzleDetails(id) {
				console.log("toJigsawPuzzleDetails() id=" + id)
				storage.save("jigsawPuzzleId", id)
				console.log("jigsawPuzzleId=" + storage.get("jigsawPuzzleId"))
				this.$router.push({
					path: '/jigsawPuzzleDetails',
					params: {
						id: id,
					}
				})
			}
		}
	}
</script>

<style type="text/css" scoped>
	ul>li {
		float: left;
		list-style: none;
	}
	.image{
		/* width: 400px; */
	}
	.jigsaw-puzzle-container {
		border: silver solid 2px;
		border-radius: 5px;
		width: 220px;
		height: 240px;
	}

	.awards {
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
	}
	.oneGrid1 {
		/* margin-right: 68px; */
	}
	/* #threeGrid {
		margin-left: 68px;
	} */
	/* .el-menu-demo {
		position: fixed;
		width: 800px;
		z-index: 3;
	} */
</style>
